<template>
  <div>
    <div style="display:flex;justify-content:flex-end;">
      <!-- 导入按钮 -->
      <el-upload :before-upload="beforeUpload" :show-file-list="false" accept=".xlsx, .xls">
        <el-button type="primary">导入 Excel</el-button>
      </el-upload>

      <!-- 导出按钮 -->
      <el-button type="success" @click="exportExcel" :disabled="!tableData.length" style="margin-left: 10px;">导出 Excel</el-button>
    </div>

    <!-- 动态表格 -->
    <el-table :data="tableData" style="width: 100%;height:50vh; margin-top: 20px;">
      <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :show-overflow-tooltip="true" :label="column.label" :min-width="column.minWidth || 120">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'

const tableData = ref([]) // 表格数据
const tableColumns = ref([]) // 动态表头
let tabDa = ref({
  total: 15,
  list: [
    {
      waiId: '2025081960137710656159744',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2025',
      waiMonth: '08',
      attendanceDay: '31.0',
      salaryDay: '31.0',
      overtime: '2.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: '23.0',
      trip: '0.0',
      remark: '请假:0.0天,出差:0.0天,加班:2.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2025071950389435266891776',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2025',
      waiMonth: '07',
      attendanceDay: '31.0',
      salaryDay: '31.0',
      overtime: '2.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: '25.0',
      trip: '0.0',
      remark: '请假:0.0天,出差:0.0天,加班:2.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2025061937304329249751040',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2025',
      waiMonth: '06',
      attendanceDay: '30.0',
      salaryDay: '30.0',
      overtime: '1.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: '21.0',
      trip: '0.0',
      remark: '请假:0.0天,出差:0.0天,加班:1.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2025051926833336525914112',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2025',
      waiMonth: '05',
      attendanceDay: '31.0',
      salaryDay: '31.0',
      overtime: '0.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: '19.0',
      trip: '0.0',
      remark: '请假:0.0天,出差:0.0天,加班:0.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2025041915688239155511296',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2025',
      waiMonth: '04',
      attendanceDay: '30.0',
      salaryDay: '30.0',
      overtime: '0.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: '22.0',
      trip: '20.0',
      remark: '请假:0.0天,出差:20.0天,加班:0.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2025031905206975571034112',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2025',
      waiMonth: '03',
      attendanceDay: '31.0',
      salaryDay: '31.0',
      overtime: '0.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: '21.0',
      trip: '15.0',
      remark: '请假:0.0天,出差:15.0天,加班:0.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2025021894581072637853696',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2025',
      waiMonth: '02',
      attendanceDay: '28.0',
      salaryDay: '24.0',
      overtime: '0.0',
      leave: '4.0',
      longLeave: '0',
      realAttendance: '12.0',
      trip: '8.0',
      remark: '请假:4.0天,出差:8.0天,加班:0.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2025011882255072646266880',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2025',
      waiMonth: '01',
      attendanceDay: '31.0',
      salaryDay: '25.5',
      overtime: '0.0',
      leave: '5.5',
      longLeave: '0',
      realAttendance: '13.5',
      trip: '10.0',
      remark: '请假:5.5天,出差:10.0天,加班:0.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2024121873526987247714304',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2024',
      waiMonth: '12',
      attendanceDay: '31.0',
      salaryDay: '31.0',
      overtime: '2.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: '24.0',
      trip: '24.0',
      remark: '请假:0.0天,出差:24.0天,加班:2.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2024111862306042243842048',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2024',
      waiMonth: '11',
      attendanceDay: '30.0',
      salaryDay: '29.0',
      overtime: '2.0',
      leave: '1.0',
      longLeave: '0',
      realAttendance: '22.0',
      trip: '22.0',
      remark: '请假:1.0天,出差:22.0天,加班:2.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2024101851043509923086336',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2024',
      waiMonth: '10',
      attendanceDay: '31.0',
      salaryDay: '31.0',
      overtime: '0.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: '19.0',
      trip: '0.0',
      remark: '请假:0.0天,出差:0.0天,加班:0.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2024091839658558531174400',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2024',
      waiMonth: '09',
      attendanceDay: '30.0',
      salaryDay: '26.0',
      overtime: '2.0',
      leave: '4.0',
      longLeave: '0',
      realAttendance: '19.0',
      trip: '0.0',
      remark: '请假:4.0天,出差:0.0天,加班:2.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2024081828975096639913984',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2024',
      waiMonth: '08',
      attendanceDay: '31.0',
      salaryDay: '31.0',
      overtime: '3.0',
      leave: '0.0',
      longLeave: '0',
      realAttendance: null,
      trip: '0.0',
      remark: '请假:0.0天,出差:0.0天,加班:3.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2024071818801613817643008',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2024',
      waiMonth: '07',
      attendanceDay: '31.0',
      salaryDay: '30.5',
      overtime: '0.0',
      leave: '0.5',
      longLeave: '0',
      realAttendance: null,
      trip: '0.0',
      remark: '请假:0.5天,出差:0.0天,加班:0.0天,未入职/已离职工作日:0.0天,未入职/已离职休息日:0.0天',
      center: false
    },
    {
      waiId: '2024061806500088474894336',
      ssName: '罗洁',
      deptName: null,
      siteCompany: null,
      waiCompanyId: null,
      waiStaffId: '7da15b23e4e04042841f7b7c62aff0d3',
      waiYear: '2024',
      waiMonth: '06',
      attendanceDay: '30.0',
      salaryDay: '10.5',
      overtime: '0.0',
      leave: '19.5',
      longLeave: '0',
      realAttendance: null,
      trip: '0.0',
      remark: '请假:0.0天,出差:0.0天,加班:0.0天,未入职/已离职工作日:12.5天,未入职/已离职休息日:7.0天',
      center: false
    }
  ],
  pageNum: 1,
  pageSize: 50,
  size: 15,
  startRow: 1,
  endRow: 15,
  pages: 1,
  prePage: 0,
  nextPage: 0,
  isFirstPage: true,
  isLastPage: true,
  hasPreviousPage: false,
  hasNextPage: false,
  navigatePages: 8,
  navigatepageNums: [1],
  navigateFirstPage: 1,
  navigateLastPage: 1
})

const keys = Object.keys(tabDa.value.list[0])
tableData.value = tabDa.value.list
tableColumns.value = [
  { prop: 'ssName', label: '姓名' },
  { prop: 'waiYear', label: '考勤年份' },
  { prop: 'waiMonth', label: '考勤月份' },
  { prop: 'attendanceDay', label: '出勤天数' },
  { prop: 'salaryDay', label: '工资天数' },
  { prop: 'overtime', label: '加班天数' },
  { prop: 'trip', label: '差旅' },
  { prop: 'leave', label: '请假' },
  { prop: 'longLeave', label: '长假扣除' },
  { prop: 'remark', label: '备注' }
]
console.log('测试数据打印', tabDa.value.list)
// 解析导入的 Excel 文件
const beforeUpload = file => {
  const reader = new FileReader()
  reader.onload = e => {
    const data = new Uint8Array(e.target.result)
    const workbook = XLSX.read(data, { type: 'array' })
    const firstSheetName = workbook.SheetNames[0]
    const worksheet = workbook.Sheets[firstSheetName]
    // 将 Excel 转成 JSON 数组
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: '' })
    if (jsonData.length === 0) {
      tableData.value = []
      tableColumns.value = []
      return
    }
    // 动态生成表头（根据第一条数据的键）
    const keys = Object.keys(jsonData[0])
    tableColumns.value = keys.map(key => ({
      prop: key,
      label: key,
      minWidth: 120
    }))
    // 赋值表格数据
    tableData.value = jsonData
    console.log('导入的表格数据', jsonData)
  }
  reader.readAsArrayBuffer(file)

  // 阻止默认上传行为
  return false
}

// 导出当前表格数据为 Excel
const exportExcel = () => {
  if (!tableData.value.length) return

  // 生成工作表
  const ws = XLSX.utils.json_to_sheet(tableData.value)
  // 新建工作簿
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

  // 生成 Excel 二进制数据
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })

  // 触发浏览器下载
  saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出数据.xlsx')
}
</script>
